<template>
  <div v-show="show">
    <!-- 组词和消消乐box -->
    <div class="word-xxl-box" v-show='currentRouter==2 || currentRouter==3'>
      <div class="marketing-list" >
        <div class="search-box">
          <div class="labelName lf">商品名称：</div>
          <el-input class="elInput lf" v-model="goods_name"></el-input>
          <div class="labelName lf">状态：</div>
          <el-select class="elInput lf" v-model="status" placeholder="请选择">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button class="lf" type="primary" @click="searchData()">查询</el-button>
        </div>
        <div class="table-box">
          <el-table :data="goodsGameList" @sort-change="onSortChange">
            <el-table-column label="商品图片" width="160px;">
              <template slot-scope="scope">
                <div class="goodsDetail clearfix">
                  <div class="priviewImg">
                    <img :src="scope.row.goods_img" alt="">
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="游戏封面" width="160px;">
              <template slot-scope="scope">
                <div class="goodsDetail clearfix">
                  <div class="priviewImg">
                    <img :src="scope.row.goods_game_img_format" alt="">
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="goods_name" ></el-table-column>
            <el-table-column label="成本/零售价">
              <template slot-scope="scope">
                <div class="control">
                  <div class="price">￥{{scope.row.supply_price}}</div>
                  <div class="price">￥{{scope.row.sell_price}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="每局花费星星" prop="play_star"></el-table-column>
            <el-table-column label="目标分数" prop="prize_score"></el-table-column>
            <el-table-column label="获奖门槛人数" prop="play_expect_num"></el-table-column>
            <el-table-column label="游戏库存" prop="play_exchange_stock"></el-table-column>
            <el-table-column label="参与用户数" prop="play_num"></el-table-column>
            <el-table-column label="成功用户数" prop="win_prize_num"></el-table-column>
            <el-table-column label="状态" prop="status_format"> </el-table-column>
            <el-table-column label="操作" width="140px">
              <template slot-scope="scope">
                <div class="control">
                  <a class="action-btn" @click="doEditOpen(scope.row)" v-if="scope.row.status == 0">编辑</a>
                  <a class="action-btn"  @click="toggleGameStatus(scope.row,'online')" v-if="scope.row.status == 0">上线</a>
                  <a class="action-btn"  @click="toggleGameStatus(scope.row,'offline')" v-if="scope.row.status == 1">下线</a>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="pageSizeArray"
            :page-size="10"
            layout="sizes, prev, pager, next"
            :total="total_count">
          </el-pagination>
        </div>
      </div>

      <el-dialog title="" data-flag="编辑" width="1000px;" :show-close="false" :visible.sync="dialogShow">
        <div class="uploadImg-box">
          <div v-if="showImage === ''" class="uploadImg-tips">
            <div class="add-icon">+</div>
            <div class="des">游戏封面</div>
            <input type="file" class="uploadInputFile" @click="uploadImg($event,1)">
          </div>
          <div v-else class="previewImages">
            <img :src="showImage" alt="">
            <div class="change-btn">
              重新上传<input type="file" class="uploadInputFile" @click="uploadImg($event,1)">
            </div>
          </div>
        </div>

        <div class="form-item clearfix">
          <div class="labelName lf">每局花费</div>
          <input v-model="play_star" type="text" class="lf linkAddressInput" >
        </div>

        <div class="form-item clearfix">
          <div class="labelName lf">目标分数</div>
          <input v-model="prize_score" type="text" class="lf linkAddressInput" >
        </div>

        <div class="form-item clearfix">
          <div class="labelName lf">获奖门槛人数</div>
          <input v-model="play_expect_num" type="text" class="lf linkAddressInput" >
        </div>

        <div class="form-item clearfix">
          <div class="labelName lf">游戏库存</div>
          <input v-model="play_exchange_stock" type="text" class="lf linkAddressInput" >
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button class="elButton" @click="doEdit" type='primary' >编辑</el-button>
          <el-button class="elButton" @click="doEditClose">取 消</el-button>
        </span>

      </el-dialog>
    </div>
    <!-- 萌娃活动 -->
    <div class="activity marketing-list" v-show='currentRouter==4'>
      <div class="activity-btn">
          <el-button type="primary" @click='addTimeShow'>添加时间</el-button>
          <el-button type="primary" @click='setGoods'>商品设置</el-button>
      </div>
      <div class="search-box activity-search">
        <div class="labelName lf">商品名称：</div>
        <el-input class="elInput lf" v-model="goods_name"></el-input>
        <el-button class="lf" type="primary" @click='searchData'>查询</el-button>
      </div>
      <div class="table-box">
          <el-table :data="goodsGameList" @sort-change="activitySort" @selection-change="setClickRow">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="商品图片" width="160px;">
              <template slot-scope="scope">
                <div class="goodsDetail clearfix">
                  <div class="priviewImg">
                    <img :src="scope.row.goods_img" alt="">
                  </div>
                </div>
              </template>
            </el-table-column>
     
            <el-table-column label="娃娃名称" prop="goods_name" ></el-table-column>
            <el-table-column label="成本/零售价">
              <template slot-scope="scope">
                <div class="control">
                  <div class="price">￥{{scope.row.supply_price}}</div>
                  <div class="price">￥{{scope.row.sell_price}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="库存" prop="play_exchange_stock"></el-table-column>
            <el-table-column label="参与活动总期数" prop="phase_count"></el-table-column>
            <el-table-column label="操作" width="140px">
              <template slot-scope="scope">
                <div class="control differ-content" @click="checkDetail(scope.row)">详情</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 设置时间 -->
       <el-dialog title="设置时间" width="1000px;" :visible.sync="dialogShow" class="time-alert">
          <ul class="time-alert-header">
            <li class="header-item" v-for='item in timeHeader' :key='item.id'>{{item.text}}</li>
          </ul>
          <ul class="time-alert-add" id="add" v-show='addBoxShow'>
            <li class="add-box" ref="addBox" v-for='(item,index) in addTimeArray' :key='item.id'>
              <div class="add-item">{{lastPhaseId + index+1}}</div>
              <div class="add-item" style="width:15%">
                <el-date-picker
                  v-model="startData"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd">
                </el-date-picker>    
              </div>
              <div class="add-item" style="width:15%">
                <el-time-select
                  v-model="startTime"
                  :picker-options="{
                    start: '00:15',
                    step: '00:15',
                    end: '23:45'
                  }"
                  placeholder="选择时间"
                  style="width:100%">
                </el-time-select>
              </div>
              <div class="add-item" style="width:15%">
                <el-date-picker
                  v-model="endData"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd">
                </el-date-picker>                
              </div>
              <div class="add-item" style="width:15%">
                <el-time-select
                  v-model="endTime"
                  :picker-options="{
                    start: '00:15',
                    step: '00:15',
                    end: '23:45'
                  }"
                  placeholder="选择时间"
                  style="width:100%">
                </el-time-select>
              </div>
              <div class="add-item">
                <el-input v-model="showNum" clearable>
                </el-input>               
              </div>
              <div class="add-item" style="width:4%">待开始</div>
              <div class="add-item del-item" style="width:12%" @click='delAddBox(index)' >删除</div>

            </li>
          </ul>
          <ul class="time-alert-content">
            <li class="content-item" v-for='item in phaseList' :key='item.id'>
              <div class="content-item-common">{{item.phase_id}}</div>
              <div class="content-item-common">{{item.start_date}}</div>
              <div class="content-item-common">{{item.start_time}}</div>
              <div class="content-item-common">{{item.end_date}}</div>
              <div class="content-item-common">{{item.end_time}}</div>
              <div class="content-item-common">{{item.times}}</div>
              <div class="content-item-common">{{item.status_desc}}</div>
              <div class="content-item-common differ-content" style="width:10%" @click='delTimes(item.phase_id)' v-show="item.status_desc=='待开始'">删除</div>
            </li>
          </ul>     
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" round class="footer-left" @click='addTime'>添加时间</el-button>
            <div class="footer-right">
              <el-button @click='timeHidden'>取消</el-button>
              <el-button type="primary" @click='addPhase'>确 定</el-button>
            </div>
          </div>
      </el-dialog>
      <!-- 设置商品 -->
      <el-dialog title="设置商品" width="1000px" :visible.sync="goodsDialogShow" class="time-alert">
          <!-- <ul class="time-alert-header">
            <li class="header-item differ-header" v-for='item in goodsTab' :key='item.id'>{{item.text}}</li>
          </ul> -->
          <el-table :data="phaseList" @sort-change="activitySort" @selection-change="setGoodsClickRow">
            <el-table-column label="期数" prop="phase_id"></el-table-column>
            <el-table-column label="开始时间">
              <template slot-scope="scope">
                <div class="control">
                  <div class="price">{{scope.row.start_date}}</div>
                  <div class="price">{{scope.row.start_time}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="结束时间">
              <template slot-scope="scope">
                <div class="control">
                  <div class="price">{{scope.row.end_date}}</div>
                  <div class="price">{{scope.row.end_time}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="status_desc"></el-table-column>
            <el-table-column label="可抢数量">
              <template slot-scope="scope">
                <!-- <input  v-model="phaseList[val + index]" type="num" placeholder="请输入可抢数量" /> -->
                <el-input class="elInput lf" v-model="canStockNums[scope.$index]" placeholder="请输入可抢数量"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="选择" width="55">
              <template slot-scope="scope">
               <div class="choose-time" :class="{active:fIndex == scope.$index}" @click='chooseTime(scope.row)'></div>
  
              </template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <div class="footer-right">
              <el-button @click='goodsDialogShow =false'>取消</el-button>
              <el-button type="primary" @click='addGoods'>确 定</el-button>
            </div>
          </div>
          <!-- <ul class="time-alert-content">
            <li class="content-item" v-for='item in phaseList' :key='item.id'>
              <div class="content-item-common">{{item.phase_id}}</div>
              <div class="content-item-common" style="width:25%">{{item.start_date}} {{item.start_time}}</div>
              <div class="content-item-common" style="width:25%">{{item.end_date}} {{item.end_time}}</div>
              <div class="content-item-common">{{item.status_desc}}</div>
              <div class="content-item-common">{{item.times}}</div>
              <div class="content-item-common differ">
                  <el-checkbox v-model="checked"></el-checkbox>
              </div>
            </li>
          </ul>    -->
      </el-dialog>
      <!-- 商品详情 -->
      <el-dialog title="详情" width="1000px" :visible.sync="goodsDetailShow">
        <el-table :data="goodsDetailData" @sort-change="activitySort" @selection-change="clickRow">
            <el-table-column label="期数" prop="phase_id">
              <template slot-scope="scope">
                <div class="control">
                  <div class="price">第{{scope.row.phase_id}}期</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="开始时间">
              <template slot-scope="scope">
                <div class="control">
                  <div class="price">{{scope.row.start_date}}</div>
                  <div class="price">{{scope.row.start_time}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="结束时间">
              <template slot-scope="scope">
                <div class="control">
                  <div class="price">{{scope.row.end_date}}</div>
                  <div class="price">{{scope.row.end_time}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="status_desc"></el-table-column>
            <el-table-column label="可抢数量" prop="can_rob_stock"></el-table-column>
            <el-table-column label="已抢数量" prop="had_rob_stock"></el-table-column>
            <el-table-column label="剩余数量" prop="rest_stock"></el-table-column>
          </el-table>
      </el-dialog>
  </div>
</template>
<script>
export default {
  name: "xiaoxiaole",
  components: {},
  props: ["type"],
  data() {
    return {
      show: false,
      currentPage: 1, //当前的页面
      per_page: 10,
      pageSizeArray: PageSizeArray,
      total_count: 0,

      game_id: "words", //游戏id，如：pinball=>弹球游戏，words=>拼词游戏
      goods_name: "", //商品id
      sku_id: "", //sku_id
      goods_id: "",

      image: "", //商品游戏图片
      showImage: "", //商品游戏图片 回显

      play_star: 0, //游戏所需星星数
      prize_score: 0, //游戏中奖所需得分
      play_expect_num: 0, //游戏期望人数
      play_exchange_stock: 0, //游戏兑换库存

      sc_name: "", //排序的字段
      sc: "", //升序或者是降序

      dialogShow: false,

      status: 2,
      statusOptions: [
        {
          value: 2,
          label: "全部"
        },
        {
          value: 1,
          label: "在线"
        },
        {
          value: 0,
          label: "已下线"
        }
      ],

      currentRouter: "",

      goodsGameList: [],
      startData: "",
      startTime: "",
      endData: "",
      endTime: "",
      showNum: "",
      addBoxShow: false,
      phaseList: [],
      timeHeader: [
        {
          text: "期数"
        },
        {
          text: "开始日期"
        },
        {
          text: "开始时间"
        },
        {
          text: "结束日期"
        },
        {
          text: "结束时间"
        },
        {
          text: "商品显示倍数"
        },
        {
          text: "状态"
        },
        {
          text: "操作"
        }
      ],
      goodsTab: [
        {
          text: "期数"
        },
        {
          text: "开抢时间"
        },
        {
          text: "结束时间"
        },
        {
          text: "状态"
        },
        {
          text: "可抢数量"
        },
        {
          text: "选择"
        }
      ],
      addTimeArray: [],
      setGoodsList: [],
      goodsDetailShow: false,
      goodsDialogShow: false,
      lastPhaseTime: "",
      lastPhaseTimeStam: "",
      setGoodsArrayList: [],
      goodsDetailData: [],
      chooseTimeParams: {},
      canStockNum: "",
      fIndex: -1,
      canStockNums: ["0", "0", "0"]
    };
  },
  watch: {
    type(val) {
      this.currentRouter = val;
      if (this.currentRouter === "1") {
        this.show = false;
      } else if (this.currentRouter === "2") {
        this.per_page = 10;
        this.game_id = "words";
        this.getGoodsGameList();
        this.show = true;
      } else if (this.currentRouter === "3") {
        this.per_page = 10;
        this.game_id = "pinball";
        this.getGoodsGameList();
        this.show = true;
      } else if (this.currentRouter === "4") {
        this.show = true;
        this.game_id = "wgxq";
        this.getGoodsGameList();
      }
    }
  },
  created() {
    this.currentRouter = this.$route.params.type;
    if (this.currentRouter === "2") {
      this.per_page = 10;
      this.game_id = "words";
      this.getGoodsGameList();
    } else if (this.currentRouter === "3") {
      this.per_page = 10;
      this.game_id = "pinball";
      this.getGoodsGameList();
    } else if (this.currentRouter === "4") {
      this.per_page = 10;
      this.game_id = "wgxq";
      this.getGoodsGameList();
    }
  },
  mounted() {
    this.currentRouter = this.$route.params.type;
  },
  methods: {
    inputFunc(e) {
      console.log(e);
    },
    //排序
    onSortChange(data) {
      console.log(data);
      this.sc_name = data.prop;
      //判断升序降序
      if (data.order === "ascending") {
        this.sc = "asc";
      } else {
        this.sc = "desc";
      }
      this.getGoodsGameList();
    },

    //切换页面
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getGoodsGameList();
    },

    //分页 每页条数切换
    handleSizeChange(data) {
      this.per_page = data;
      this.getGoodsGameList();
    },

    //点击查询
    searchData() {
      this.currentPage = 1;
      this.getGoodsGameList();
    },

    clearData() {
      this.image = "";
      this.showImage = "";
      this.goods_name = "";
      this.goods_id = "";
      this.sku_id = "";
      this.play_star = "";
      this.prize_score = "";
      this.play_expect_num = "";
      this.play_exchange_stock = "";
    },

    //游戏商品列表
    getGoodsGameList() {
      let formData = new FormData();
      formData.append("page", this.currentPage);
      formData.append("per_page", this.per_page);

      this.game_id ? formData.append("game_id", this.game_id) : "";
      this.goods_name ? formData.append("goods_name", this.goods_name) : "";
      formData.append("status", this.status);

      this.$http(
        "/wgl_admin/index.php?app=game&act=index",
        "post",
        {},
        {},
        formData,
        success => {
          this.goodsGameList = success.data.list;
          this.total_count = success.data.total_count;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },

    //编辑窗口 打开
    doEditOpen(row) {
      this.dialogShow = true;
      this.showImage = row.goods_game_img_format;
      this.image = row.goods_game_img;
      this.goods_id = row.goods_id;
      this.sku_id = row.sku_id;
      this.play_star = row.play_star;
      this.prize_score = row.prize_score;
      this.play_expect_num = row.play_expect_num;
      this.play_exchange_stock = row.play_exchange_stock;
      console.log(row);
    },

    //编辑窗口 关闭
    doEditClose() {
      this.dialogShow = false;
      this.clearData();
    },

    //切换游戏 上下线 游戏
    toggleGameStatus(row, status) {
      let warningText;

      status === "online"
        ? (warningText = "是否确定上线")
        : (warningText = "是否确定下线");

      this.$confirm(warningText, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.showImage = row.goods_game_img_format;
          this.image = row.goods_game_img;
          this.goods_id = row.goods_id;
          this.goods_name = row.goods_name;
          this.sku_id = row.sku_id;

          let formData = new FormData();

          formData.append("ids", this.sku_id);
          formData.append("status", status);
          formData.append("game_id", row.game_id);

          this.$http(
            "/wgl_admin/index.php?app=game&act=changeStatus",
            "post",
            {},
            {},
            formData,
            success => {
              this.dialogShow = false;
              this.$message.success(success.state.msg);
              this.clearData();
              this.getGoodsGameList();
            },
            error => {
              this.$message.error(error.state.msg);
            }
          );
        })
        .catch(() => {
          console.log("取消");
        });
    },

    //点击确定上传图片
    uploadImg(e, type) {
      const currentDOM = e.target;
      //清空files
      currentDOM.value = "";
      let self = this;
      function readFile() {
        let image = this.files[0];
        let formData = new FormData();

        formData.append("image", image);
        formData.append("belong", 2);

        //开始上传图片
        self.$http(
          "/wgl_admin/index.php?app=upload_img",
          "post",
          {},
          {},
          formData,
          success => {
            self.image = success.data.store_path;
            self.showImage = success.data.file_path;
          },
          error => {
            self.$message.error(error.state.msg);
          }
        );
      }
      currentDOM.addEventListener("change", readFile);
    },

    doEdit() {
      let reqArr = [
        ["image", "string", "请上传图片"],
        ["play_star", "", "请输入每局花费"],
        ["prize_score", "", "请输入目标分数"],
        ["play_expect_num", "", "请输入获奖门槛人数"],
        ["play_exchange_stock", "", "请输入游戏库存"]
      ];
      let res = this.$requiredFun(reqArr, this);

      if (res.state) {
        if (Number(this.play_star) < 1) {
          this.$message.error("每局花费不得小于0");
          return;
        }
        if (Number(this.prize_score) < 1) {
          this.$message.error("目标分数不得小于0");
          return;
        }
        if (Number(this.play_expect_num) < 1) {
          this.$message.error("获奖门槛人数小于0");
          return;
        }
        if (Number(this.play_exchange_stock) < 1) {
          this.$message.error("游戏库存不得小于0");
          return;
        }

        let formData = new FormData();
        formData.append("game_id", this.game_id);
        formData.append("goods_id", this.goods_id);
        formData.append("sku_id", this.sku_id);
        formData.append("image", this.image);
        formData.append("play_star", this.play_star);
        formData.append("prize_score", this.prize_score);
        formData.append("play_expect_num", this.play_expect_num);
        formData.append("play_exchange_stock", this.play_exchange_stock);

        this.$http(
          "/wgl_admin/index.php?app=game&act=edit",
          "post",
          {},
          {},
          formData,
          success => {
            this.dialogShow = false;
            this.$message.success(success.state.msg);
            this.clearData();
            this.getGoodsGameList();
          },
          error => {
            this.$message.error(error.state.msg);
          }
        );
      } else {
        this.$message.error(res.msg);
      }
    },
    // 萌娃活动 方法
    activitySort() {},
    // 弹窗显示
    addTimeShow() {
      this.dialogShow = true;
      this.getPhaseData();
    },
    // 获取期数列表
    getPhaseData(status = "") {
      let formData = new FormData();
      // 这里需要注意status为0的值
      if (status !== "") {
        formData.append("status", status);
      }
      this.$http(
        "/wgl_admin/index.php?app=wgxq_phase&act=index",
        "post",
        {},
        {},
        formData,
        success => {
          console.log(success);
          this.phaseList = success.data.list;
          if (!success.data.max_phase) {
            this.lastPhaseId = 0;
          } else {
            this.lastPhaseId = success.data.max_phase.phase_id;
          }
          // 最新一期的时间戳
          this.lastPhaseTime = `${success.data.list[0].end_date} ${
            success.data.list[0].end_time
          }`;
          this.lastPhaseTimeStam = Math.round(
            new Date(this.lastPhaseTime).getTime() / 1000
          ).toString();
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    timeHidden() {
      this.dialogShow = false;
      this.addBoxShow = false;
      this.addTimeArray.splice(0, 1);
    },
    // 添加时间期数
    addTime() {
      // let liDom = this.$refs.addBox
      // let cloneDom = liDom.cloneNode(true)
      // let ul = document.querySelector('#add')
      // ul.appendChild(cloneDom)
      if (this.addBoxShow) {
        this.$message.error("暂时只是添加一次哦");
        return;
      }
      this.addTimeArray.push({});
      console.log(this.addTimeArray);
      this.addBoxShow = true;
    },
    delAddBox(index) {
      console.log(index);
      this.addBoxShow = false;
      this.addTimeArray.splice(index, 1);
    },
    // 提交时间期数
    addPhase() {
      let params = {
        phase_id: this.lastPhaseId + 1,
        start_date: this.startData,
        start_time: this.startTime + ":00",
        end_date: this.endData,
        end_time: this.endTime + ":00",
        times: this.showNum
      };
      let addFirstTime = `${this.startData} ${this.startTime}`;

      let addLastTime = `${this.endData} ${this.endTime}`;
      // 开始时间时间戳
      let addFirstTimeStam = Math.round(
        new Date(addFirstTime).getTime() / 1000
      ).toString();
      // 结束时间时间戳
      let addLastTimeStam = Math.round(
        new Date(addLastTime).getTime() / 1000
      ).toString();
      // 当前时间时间戳
      let currentTimeStam = Math.round(new Date().getTime() / 1000).toString();
      // 最新的一项数组的时间戳
      
      this.lastPhaseTime = Math.round(
        new Date(this.lastPhaseTime).getTime() / 1000
      ).toString();
      if (addLastTimeStam < addFirstTimeStam) {
        this.$message.error("结束时间不能小于开始时间");
        return;
      }
      // if (addFirstTimeStam - currentTimeStam < 3600) {
      //   this.$message.error("活动的时间需提前当前时间1个小时");
      //   return;
      // }
      if (addFirstTimeStam - this.lastPhaseTimeStam < 0) {
        this.$message.error("这个时间点不能再设置了");
        return;
      }
      let postArray = [];
      postArray.push(params);
      let stringArray = {
        phases: JSON.stringify(postArray)
      };
      this.$http(
        "/wgl_admin/index.php?app=wgxq_phase&act=add",
        "get",
        {},
        stringArray,
        {},
        success => {
          this.$message.success("操作成功");
          this.addTimeArray.splice(0, 1);

          this.dialogShow = false;
          this.addBoxShow = false;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    clickRow(data) {
      console.log(data);
    },
    // 商品设置选择
    setClickRow(data) {
      let setGoodsArray = [];
      data.forEach(item => {
        let setGoodsObject = {};
        setGoodsObject.goods_id = item.goods_id;
        setGoodsObject.sku_id = item.sku_id;
        setGoodsArray.push(setGoodsObject);
      });
      this.setGoodsArrayList = setGoodsArray;
    },
    // 商品设置选择时间
    setGoodsClickRow(data) {
      console.log(data);
    },
    // 商品设置
    setGoods(data) {
      if (!this.setGoodsArrayList.length) {
        this.$message.error("请先设置商品");
        return;
      }
      this.goodsDialogShow = true;
      this.getPhaseData(0);
    },
    delTimes(index) {
      console.log(index);
      let formData = new FormData();
      formData.append("phase_id", index);
      this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http(
            "/wgl_admin/index.php?app=wgxq_phase&act=drop",
            "post",
            {},
            {},
            formData,
            success => {
              this.$message.success("操作成功");
              this.getPhaseData();
            },
            error => {
              this.$message.error(error.state.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 查看详情
    checkDetail(data) {
      let formData = new FormData();
      formData.append("goods_id", data.goods_id);
      formData.append("sku_id", data.sku_id);
      this.goodsDetailShow = true;
      this.$http(
        "/wgl_admin/index.php?app=wgxq_phase&act=getDetail",
        "post",
        {},
        {},
        formData,
        success => {
          this.$message.success("操作成功");
          this.goodsDetailData = success.data.list;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    },
    chooseTime(data) {
      // 先找到点击的序列号
      this.fIndex = this.phaseList.findIndex((item, index) => {
        return item.phase_id == data.id;
      });
      // 添加要抢购的时间id
      this.chooseTimeParams.phase_id = data.phase_id;
    },
    addGoods() {
      if (this.fIndex <= -1) {
        this.$message.error("请选择时间");
        return;
      }
      if (!this.canStockNums[this.fIndex]) {
        this.$message.error("请填写抢购数量");
        return;
      }
      // 添加 抢购数量值
      this.chooseTimeParams.can_rob_stock = this.canStockNums[this.fIndex];
      let newChooseArray = [];
      for (let i = 0; i < this.setGoodsArrayList.length; i++) {
        // 合并对象
        let newObject = Object.assign(
          this.setGoodsArrayList[i],
          this.chooseTimeParams
        );
        newChooseArray.push(newObject);
      }
      let newParams = {
        phases_sku: JSON.stringify(newChooseArray)
      };
      console.log(newChooseArray);
      this.$http(
        "/wgl_admin/index.php?app=wgxq_phase&act=setGoodsPhase",
        "get",
        {},
        newParams,
        {},
        success => {
          this.$message.success("操作成功");
          this.goodsDialogShow = false;
          this.getGoodsGameList();
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.marketing-model {
  padding-left: 118px;
  .marketing-list {
    padding: 30px 56px 30px 50px;
    .search-box {
      border: 1px solid #e6e8f4;
      max-width: 1453px;
      min-width: 600px;
      width: 100%;
      height: 90px;
      padding: 25px 30px;
      &.high {
        height: 140px;
      }
      .elInput {
        display: block;
        width: 150px;
        font-size: 12px;
        color: #333;
        margin-right: 20px;
      }
      .labelName {
        height: 40px;
        line-height: 40px;
        color: #333;
        font-size: 14px;
      }
      .elTimepicker {
        display: block;
        width: 180px;
        font-size: 12px;
        color: #333;
        margin-right: 10px;
      }
    }
    .table-box {
      // max-width: 1466px;
      width: 100%;
      margin-top: 48px;
      .control {
        > a {
          color: #3f87f5;
          font-size: 12px;
          cursor: pointer;
        }
        .price {
          font-size: 12px;
          color: #e17474;
        }

        .action-btn:last-child::after {
          width: 0;
          height: 0;
        }
      }

      .userAvatar {
        width: 80px;
        height: 80px;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .goodsDetail {
        .priviewImg {
          margin-right: 10px;
          > img {
            display: block;
            width: 80px;
            height: 80px;
            margin: 0 auto;
          }
        }
        .goodsMsg {
          color: #333;
          font-size: 12px;
          max-width: 120px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          overflow: hidden;
        }
      }
    }
  }
  .form-item {
    width: 615px;
    margin: 0 auto 20px;
    color: #666666;
    font-size: 12px;
    .labelName {
      width: 100px;
      text-align: right;
      height: 40px;
      line-height: 40px;
      margin-right: 10px;
    }
    .linkAddressInput {
      height: 40px;
      border: 1px solid #e6e8f4;
      padding: 0 28px;
      margin-right: 10px;
      width: 475px;
      padding: 0 28px;
    }
    .tips {
      height: 40px;
      line-height: 40px;
    }
  }
  .uploadImg-box {
    width: 110px;
    height: 110px;
    border: 1px solid #e6e8f4;
    background: #f8f9fe;
    position: relative;
    margin: 0 auto 50px;
    .uploadImg-tips {
      width: 100%;
      height: 100%;
      .add-icon {
        text-align: center;
        color: #e6e8f7;
        font-size: 40px;
        height: 70px;
        line-height: 70px;
      }
      .des {
        font-size: 14px;
        text-align: center;
        color: #a6a8a5;
      }
    }
    .previewImages {
      display: block;
      width: 100%;
      height: 100%;
      > img {
        display: block;
        height: 100%;
        width: 100%;
      }
      .change-btn {
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        height: 24px;
        line-height: 24px;
        left: 0;
        cursor: pointer;
        font-size: 12px;
        cursor: pointer;
      }
      .change-btn:hover {
        background: #333;
      }
    }
    .uploadInputFile {
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      cursor: pointer;
      z-index: 9999;
      cursor: pointer;
    }
    .tips {
      height: 30px;
      line-height: 30px;
      color: #666;
      text-align: center;
      font-size: 14px;
    }
  }
  .dialog-footer {
    display: block;
    height: 100%;
    width: 100%;
    padding-top: 18px;
    border-top: 1px solid #e6e8f4;
    .elButton {
      width: 150px;
    }
  }
}
.activity {
  &-search {
    margin: 20px 0;
  }
}
.footer-left {
  display: inline-block;
  float: left;
}
.footer-right {
  display: inline-block;
}
.time-alert {
  &-header {
    width: 100%;
    .header-item {
      display: inline-block;
      width: 8%;
      text-align: center;
      height: 60px;
      line-height: 60px;
      &:nth-child(2) {
        width: 15%;
      }
      &:nth-child(3) {
        width: 15%;
      }
      &:nth-child(4) {
        width: 15%;
      }
      &:nth-child(5) {
        width: 15%;
      }
      &:last-child {
        width: 8%;
      }
    }
    .differ-header {
      &:nth-child(2) {
        width: 25%;
      }
      &:nth-child(3) {
        width: 25%;
      }
    }
  }

  .content-item {
    display: flex;
    width: 100%;
    &-common {
      // display: inline-block;
      width: 8%;
      text-align: center;
      height: 60px;
      line-height: 60px;
      &:nth-child(2) {
        width: 15%;
      }
      &:nth-child(3) {
        width: 15%;
      }
      &:nth-child(4) {
        width: 15%;
      }
      &:nth-child(5) {
        width: 15%;
      }
    }
  }
}
.differ-content {
  &:hover {
    cursor: pointer;
  }
}
.pagination {
  width: 1466px;
  text-align: right;
  margin-top: 46px;
}
.choose-time {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #333;
  background: #fff;
}
.active {
  background: red;
  border: 1px solid red;
}
.add-box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  .add-item {
    display: inline-block;
    width: 8%;
    text-align: center;
    &:last-child {
      width: 4%;
    }
    &:nth-child(7) {
      width: 4%;
    }
  }
  .del-item {
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
